﻿@page "/splitter/expand-collapse"

@using Syncfusion.Blazor
@using Syncfusion.Blazor.Layouts
@using Syncfusion.Blazor.Grids;
@using Syncfusion.Blazor.Data
@using Syncfusion.Blazor.Buttons;
@using Orientation = Syncfusion.Blazor.Layouts.Orientation

<div class="col-lg-12 control-section">
    <div class="control_wrapper">
        <div class="expand-pane">
            <SfSplitter Height="100vh" Width="100%" SeparatorSize="3">
                <SplitterPanes>
                    <SplitterPane Size="48%" Min="25%" Collapsible="true">

                        <SfButton Content="查询"  CssClass="e-info" > </SfButton>
                        <SfButton   Add> </SfButton>
                        <SfButton  > Update - 1001 </SfButton>
                        <SfButton  > Delete the selected row </SfButton>

                       
                    </SplitterPane>
                    <SplitterPane>
                        <ContentTemplate>
                            <div>
                                <SfSplitter ID="inner-splitter" Height="385px" SeparatorSize="3" Orientation="Orientation.Vertical">
                                    <SplitterPanes>
                                        <SplitterPane Size="50%" Collapsible="true">
                                            <div>
                                                <div class="content">
                                                    <a href="https://www.syncfusion.com/ebooks/data_capture_and_extraction_with_c_sharp_succinctly" target="_blank">Data Capture and Extraction with C# Succinctly</a>
                                                    <p>Capturing and extracting information is one of the most important tasks a developer can perform, and making this task more engaging without relying entirely on specialized tools is an efficient way to improve productivity. In Data Capture and Extraction with C# Succinctly, author Ed Freitas guides readers toward getting more out of C# in minimal time. Email has become a pillar of our modern and connected society, and it now serves as a primary means of communication. Because each email is filled with valuable information, data extraction has emerged as a worthwhile skill set for developers in today’s business world. If you can parse an email and extract data from it, companies that automate processes, e.g., helpdesk systems.</p>
                                                </div>
                                            </div>
                                        </SplitterPane>
                                        <SplitterPane Collapsible="true">
                                            <div>
                                                <div class="content">
                                                    <a href="https://www.syncfusion.com/ebooks/spark" target="_blank">Spark Succinctly</a>
                                                    <p>Mastering big data requires an aptitude at every step of information processing. Post-processing, one of the most important steps, is where you find Apache Spark frequently employed. Spark Succinctly, by Marko Svaljek, addresses Spark’s use in the ultimate step in handling big data. This e-book, the third installment in Svaljek’s IoT series, teaches the basics of using Spark and explores how to work with RDDs, Scala and Python tasks, JSON files, and Cassandra.</p>
                                                </div>
                                            </div>
                                        </SplitterPane>
                                    </SplitterPanes>
                                </SfSplitter>
                            </div>
                        </ContentTemplate>
                    </SplitterPane>
                </SplitterPanes>
            </SfSplitter>
        </div>
    </div>
</div>

<style>
    .e-splitter .content {
        padding: 20px;
    }

    .e-splitter p {
        margin-top: 10px;
    }

    .expand-pane {
        margin: 20px auto;
        max-width: 100%;
    }
        /* styles to hide scroll bars */
        .expand-pane .e-pane.e-pane-horizontal.e-scrollable::-webkit-scrollbar,
        .expand-pane .e-pane.e-pane-vertical.e-scrollable::-webkit-scrollbar {
            display: none;
        }

        .expand-pane .e-pane.e-pane-horizontal.e-scrollable, .expand-pane .e-pane.e-pane-vertical.e-scrollable {
            scrollbar-width: none;
            -ms-overflow-style: none;
        }

    .control-section {
        min-height: 370px;
        margin-bottom: 15px;
        margin-top: 10px;
    }

    #inner-splitter {
        border: transparent;
    }
</style>
